<template>
  <div class="operate_bar" ref="barRef">
    <a-tooltip placement="left">
      <template #title>刷新</template>
      <RedoOutlined
        class="refresh"
        @click="handleRefresh"
      />
    </a-tooltip>
    <a-tooltip placement="left">
      <template #title>联系客服</template>
      <UserOutlined class="customer_service" />
    </a-tooltip>
    <a-tooltip placement="left">
      <template #title>回到顶部</template>
      <!--      <VerticalAlignTopOutlined -->
      <!--        class="to_top" -->
      <!--        @click="handleBackToTop" -->
      <!--      /> -->
      <UpOutlined class="to_top" @click="handleBackToTop" />
    </a-tooltip>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const barRef = ref(null)

const props = defineProps({
  scrollTargets: {
    type: Array,
    default: () => [],
  },
})

const emits = defineEmits(['elseElemToTop'])

// 处理刷新
const handleRefresh = () => {
  location.reload()
}

function handleBackToTop() {
  const targets = Array.isArray(props.scrollTargets)
    ? props.scrollTargets
    : [props.scrollTargets]

  // targets.forEach((selector) => {
  //   const container = document.querySelector(selector)
  //   if (container) {
  //     container.scrollTo({
  //       top: 0,
  //       behavior: 'smooth',
  //     })
  //   }
  // })

  // 顺带滚动窗口本身
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })

  emits('elseElemToTop')
}

onMounted(() => {
  const bar = barRef.value
  let isDragging = false
  let offsetX = 0
  let offsetY = 0

  const onMouseDown = (e) => {
    isDragging = true
    offsetX = e.clientX - bar.offsetLeft
    offsetY = e.clientY - bar.offsetTop
    bar.style.transition = 'none'
  }

  const onMouseMove = (e) => {
    if (isDragging) {
      bar.style.left = `${e.clientX - offsetX}px`
      bar.style.top = `${e.clientY - offsetY}px`
    }
  }

  const onMouseUp = () => {
    isDragging = false
  }

  bar.addEventListener('mousedown', onMouseDown)
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)

  onBeforeUnmount(() => {
    bar.removeEventListener('mousedown', onMouseDown)
    document.removeEventListener('mousemove', onMouseMove)
    document.removeEventListener('mouseup', onMouseUp)
  })
})
</script>

<style scoped lang="scss">
.operate_bar {
  position: fixed;
  right: 5rem;
  bottom: 10rem;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 4rem;
  height: 10rem;
  background-color: rgba(244, 245, 248, 0.8);
  overflow: hidden;
  font-size: 1.5rem;
  border-radius: 2.5rem;
  color: #bfbfbf;
  cursor: move;

  &::before,
  &::after {
    content: '';
    display: block;
    width: 4rem;
    height: 2.5rem;
    background-color: rgba(244, 245, 248, 0.7);
  }

  &::before {
    border-radius: 2.5rem 2.5rem 0 0;
  }

  &::after {
    border-radius: 0 0 2.5rem 2.5rem;
  }

  .refresh,
  .customer_service,
  .to_top {
    cursor: pointer;
    margin-top: 1rem;
  }
}
</style>
